<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind</title>
    <style>
        .aa{
            border: 5px red solid;
        }
        .bb{
            border: 5px yellow solid;
        }
    </style>
</head>
<body>
<script src="../js/vue.js"></script>


<div id="app">
{{msg}}<br>
  <img :width="width" :src="mySrc" alt="这是图片" :class="isClass?'aa':'bb'">
</div>
<!--v-bind是用来将html标签中相关的属性绑定到vue实例中,影响到对应标签中的属性值变化-->
<script>
  var app = new Vue({
    el: "#app",   //element:元素
    data:{        //data:数据 用来vue实例对象绑定一系列数据
      msg:"hello vue",
        mySrc:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20180801%2F23%2F1533136040-oNcwkVuRxL.png&refer=http%3A%2F%2Fimage.biaobaiju.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1614500688&t=6ba247b6f3bfc546584bf247f2b0e892",
        width:10,
        isClass:false //true 红色 false 黄色
    },
    methods:{

    }
  });
</script>
</body>
</html>